<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#tableCSS
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:50%;
border-color:blue;
}
#tableCSS td, #tableCSS th 
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}

#tableCSS td 
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#E3CEF6;
}
#tableCSS tr.alt td 
{
color:#000000;
background-color:#EAF2D3;
}
a{
color: blue;
}
</style>
<script>
	function showHint() {
		var xmlhttp;
		var str = document.getElementById("txtAcNo").value;
		if (str.length == 0) {
			document.getElementById("txtHint").innerHTML = "";
			return;
		}
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET", "availableBalance.do?txtAcNo=" + str
				+ "&operation=availableBalance", true);
		xmlhttp.send();
	}

	function callWithdrawAmt() {
		var xmlhttp;
		var str = document.getElementById("txtAcNo").value;
		var amt = document.getElementById("txtAmt").value;
		if (str.length == 0 && amt.length == 0) {
			document.getElementById("txtHint").innerHTML = "";
			return;
		}
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
			}
		}

		xmlhttp.open("GET", "availableBalance.do?txtAcNo=" + str + "&txtAmt="
				+ amt + "&operation=withdraw", true);
		xmlhttp.send();
	}

	function callDepositAmt() {
		var xmlhttp;
		var str = document.getElementById("txtAcNo").value;
		var amt = document.getElementById("txtAmt").value;
		if (str.length == 0 && amt.length == 0) {
			document.getElementById("txtHint").innerHTML = "";
			return;
		}
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
			}
		}

		xmlhttp.open("GET", "availableBalance.do?txtAcNo=" + str + "&txtAmt="
				+ amt + "&operation=deposit", true);
		xmlhttp.send();
	}
</script>

</head>
<body>
	<center>
		<h1>My Cognizant ATM</h1><br/>
		<table id="tableCSS">
			<tr>
				<td>*Provide Account No.:</td>
				<td><input type="text" id="txtAcNo" name="txtAcNo" value="12345"/>
				</td>
			</tr>
			<tr>
				<td colspan="2"><a href="#" onclick="showHint()">Available
						Balance</a>
				</td>
			</tr>
			<tr>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td>Enter Amount</td>
				<td><input type="text" id="txtAmt" />
				</td>
			</tr>
			<tr>
				<td><a href="#" onclick="callWithdrawAmt()">Withdraw</a>
				</td>
				<td><a href="#" onclick="callDepositAmt()">Deposit</a>
				</td>
			</tr>
			<tr>
				<td colspan="2"><div id="txtHint"></div>
				</td>
			</tr>
		</table>
		<a href="index.jsp">Back</a>
	</center>
</body>
</html>